<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>H+移动工作平台 - 出差详情</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
  <div class="device-container">
    <!-- 状态栏 -->
    <div class="status-bar">
      <div class="status-bar-left">
        <span class="time">9:41</span>
      </div>
      <div class="status-bar-right">
        <i class="fas fa-signal signal"></i>
        <i class="fas fa-wifi wifi"></i>
        <i class="fas fa-battery-full battery"></i>
      </div>
    </div>
    
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left">
        <a href="my_travel_apply.html"><i class="fas fa-arrow-left"></i></a>
      </div>
      <div class="nav-title">出差详情</div>
      <div class="nav-right">
        <i class="fas fa-ellipsis-h"></i>
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="app-content">
      <!-- 状态卡片 -->
      <div class="p-4">
        <div class="bg-blue-50 rounded-lg p-4">
          <div class="flex items-center justify-between mb-2">
            <div class="flex items-center">
              <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                <i class="fas fa-plane text-blue-500"></i>
              </div>
              <div>
                <div class="font-medium text-lg">北京出差</div>
                <div class="text-sm text-gray-500">申请编号：BT202403250001</div>
              </div>
            </div>
            <span class="tag tag-blue">审批中</span>
          </div>
          <div class="flex justify-between text-sm text-gray-600 mt-2">
            <span>申请日期：2024-03-25</span>
            <span>1/2 审批节点</span>
          </div>
        </div>
      </div>
      
      <!-- 快捷操作 -->
      <div class="flex justify-between px-4 mb-4">
        <button class="btn-icon">
          <i class="fas fa-edit"></i>
          <span>修改</span>
        </button>
        <button class="btn-icon">
          <i class="fas fa-copy"></i>
          <span>复制</span>
        </button>
        <button class="btn-icon">
          <i class="fas fa-undo"></i>
          <span>撤回</span>
        </button>
        <button class="btn-icon">
          <i class="fas fa-rocket"></i>
          <span>催办</span>
        </button>
      </div>
      
      <!-- 基本信息 -->
      <div class="card mx-4 mb-4">
        <div class="card-header">
          <span>基本信息</span>
        </div>
        <div class="card-body">
          <div class="info-item">
            <div class="info-label">申请人</div>
            <div class="info-value">张医生</div>
          </div>
          <div class="info-item">
            <div class="info-label">所属部门</div>
            <div class="info-value">内科</div>
          </div>
          <div class="info-item">
            <div class="info-label">出差地点</div>
            <div class="info-value">北京</div>
          </div>
          <div class="info-item">
            <div class="info-label">出差类型</div>
            <div class="info-value">会议</div>
          </div>
          <div class="info-item">
            <div class="info-label">出差日期</div>
            <div class="info-value">2024-04-10 至 2024-04-15</div>
          </div>
          <div class="info-item">
            <div class="info-label">出差天数</div>
            <div class="info-value">6天</div>
          </div>
          <div class="info-item">
            <div class="info-label">预计费用</div>
            <div class="info-value">¥4,500.00</div>
          </div>
          <div class="info-item">
            <div class="info-label">出差事由</div>
            <div class="info-value">参加全国心血管疾病学术会议，进行学术交流和最新研究成果分享。会议将邀请国内外知名专家进行专题讲座，有助于提升科室医疗水平。</div>
          </div>
        </div>
      </div>
      
      <!-- 交通信息 -->
      <div class="card mx-4 mb-4">
        <div class="card-header">
          <span>交通信息</span>
        </div>
        <div class="card-body">
          <div class="info-item">
            <div class="info-label">交通方式</div>
            <div class="info-value">飞机、出租车</div>
          </div>
          <div class="info-item">
            <div class="info-label">是否需要预订</div>
            <div class="info-value">否</div>
          </div>
          <div class="info-item">
            <div class="info-label">交通备注</div>
            <div class="info-value">往返机票自行购买，当地交通使用出租车。</div>
          </div>
        </div>
      </div>
      
      <!-- 住宿信息 -->
      <div class="card mx-4 mb-4">
        <div class="card-header">
          <span>住宿信息</span>
        </div>
        <div class="card-body">
          <div class="info-item">
            <div class="info-label">是否需要住宿</div>
            <div class="info-value">是</div>
          </div>
          <div class="info-item">
            <div class="info-label">住宿天数</div>
            <div class="info-value">5晚</div>
          </div>
          <div class="info-item">
            <div class="info-label">是否需要预订</div>
            <div class="info-value">否</div>
          </div>
          <div class="info-item">
            <div class="info-label">住宿备注</div>
            <div class="info-value">会议组织方提供住宿推荐，将按照公司差旅标准选择酒店。</div>
          </div>
        </div>
      </div>
      
      <!-- 审批流程 -->
      <div class="card mx-4 mb-4">
        <div class="card-header">
          <span>审批流程</span>
        </div>
        <div class="card-body p-0">
          <div class="approval-flow">
            <div class="approval-item active">
              <div class="approval-icon">
                <i class="fas fa-check"></i>
              </div>
              <div class="approval-line"></div>
              <div class="approval-content">
                <div class="approval-title">提交申请</div>
                <div class="approval-user">张医生</div>
                <div class="approval-time">2024-03-25 10:30</div>
              </div>
            </div>
            
            <div class="approval-item active">
              <div class="approval-icon">
                <i class="fas fa-check"></i>
              </div>
              <div class="approval-line"></div>
              <div class="approval-content">
                <div class="approval-title">部门主任审批</div>
                <div class="approval-user">李主任</div>
                <div class="approval-time">2024-03-25 14:20</div>
                <div class="approval-comment">同意，请注意按照差旅标准执行。</div>
              </div>
            </div>
            
            <div class="approval-item current">
              <div class="approval-icon">
                <i class="fas fa-clock"></i>
              </div>
              <div class="approval-line"></div>
              <div class="approval-content">
                <div class="approval-title">医院领导审批</div>
                <div class="approval-user">张院长</div>
                <div class="approval-time">待审批</div>
              </div>
            </div>
            
            <div class="approval-item">
              <div class="approval-icon">
                <i class="fas fa-check"></i>
              </div>
              <div class="approval-content">
                <div class="approval-title">完成</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 抄送人 -->
      <div class="card mx-4 mb-4">
        <div class="card-header">
          <span>抄送人</span>
        </div>
        <div class="card-body">
          <div class="flex flex-wrap">
            <div class="flex items-center bg-gray-100 rounded-full px-3 py-1 mr-2 mb-2">
              <span class="text-sm">赵医生</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部标签栏 -->
    <div class="tab-bar">
      <a href="home.html" class="tab-item">
        <i class="fas fa-home tab-icon"></i>
        <span>首页</span>
      </a>
      <a href="asset.html" class="tab-item">
        <i class="fas fa-laptop tab-icon"></i>
        <span>资产</span>
      </a>
      <a href="finance.html" class="tab-item active">
        <i class="fas fa-wallet tab-icon"></i>
        <span>财务</span>
      </a>
      <a href="material.html" class="tab-item">
        <i class="fas fa-box tab-icon"></i>
        <span>物资</span>
      </a>
      <a href="profile.html" class="tab-item">
        <i class="fas fa-user tab-icon"></i>
        <span>我的</span>
      </a>
    </div>
  </div>
  
  <style>
    .approval-flow {
      padding: 1rem 0;
    }
    
    .approval-item {
      display: flex;
      position: relative;
      padding: 0 1rem 1.5rem 1rem;
    }
    
    .approval-item:last-child {
      padding-bottom: 0;
    }
    
    .approval-icon {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      background-color: #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      color: #9ca3af;
    }
    
    .approval-item.active .approval-icon {
      background-color: #3b82f6;
      color: white;
    }
    
    .approval-item.current .approval-icon {
      background-color: #93c5fd;
      color: #1e40af;
    }
    
    .approval-line {
      position: absolute;
      left: 2rem;
      top: 2rem;
      bottom: 0;
      width: 1px;
      background-color: #e5e7eb;
      transform: translateX(-50%);
    }
    
    .approval-item:last-child .approval-line {
      display: none;
    }
    
    .approval-content {
      margin-left: 1rem;
      flex: 1;
    }
    
    .approval-title {
      font-weight: 500;
    }
    
    .approval-user {
      font-size: 0.875rem;
      color: #4b5563;
      margin-top: 0.25rem;
    }
    
    .approval-time {
      font-size: 0.75rem;
      color: #9ca3af;
      margin-top: 0.25rem;
    }
    
    .approval-comment {
      margin-top: 0.5rem;
      padding: 0.5rem;
      background-color: #f3f4f6;
      border-radius: 0.25rem;
      font-size: 0.875rem;
    }
  </style>
</body>
</html> 